<template>
  <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#545c64"
    text-color="#fff" active-text-color="#ffd04b">
    <h3>答题系统</h3>
    <el-menu-item index="1" @click="openAnswer">
      <i class="el-icon-setting"></i>
      <span slot="title">开始答题</span>
    </el-menu-item>
    <el-menu-item index="2" @click="openAnswerList">
      <i class="el-icon-setting"></i>
      <span slot="title">题目管理</span>
    </el-menu-item>
    <el-menu-item index="3" @click="openAnswerRecord">
      <i class="el-icon-setting"></i>
      <span slot="title">答题记录</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'AnswerAdist',

  data() {
    return {};
  },

  mounted() {},

  methods: {
    openAnswer() {
      if(this.$route.name!='answer'){
        this.$router.push('answer');
      }  
    },
    openAnswerRecord(){
      if(this.$route.name!='answerRecord'){
        this.$router.push('answerRecord');
      }
    },
    openAnswerList(){
      if(this.$route.name!='answerList'){
        this.$router.push('answerList');
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  height: 100%;
  border: none;
  h3 {
    color: #fff;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    font-weight: 400px;
  }
}
</style>